import React from 'react';
import styles from './banner.module.less';
import { Input, Button } from 'antd';
import { LinkOutlined, TagOutlined } from '@ant-design/icons';
import BannerList from './bannerList/bannerList';
import { axios_AddBanner } from './service';


const Banner = () => {
    let alt,link;
    // 添加轮播图
    const addBannerData = async () => {
        let { code, data, message } = await axios_AddBanner(alt.input.value,link.input.value) || {};
        if (code!=="200") {
            return alert(`${message}`);
        }
        localStorage.setItem("bannerData", JSON.stringify(data));
        window.location.reload();
      };
    return (
        <div className={styles.banner}>
            <div className={styles.head}><h3>轮播图管理</h3></div>
            <div className={styles.add}>
                <Input ref={input => alt = input} className={styles.alt} placeholder="图片描述" prefix={<TagOutlined />} />
                <Input ref={input => link = input} className={styles.url} placeholder="图片地址(url)" prefix={<LinkOutlined />} />
                <Button type="primary" className={styles.upload_btn} onClick={()=>{
                    addBannerData();
                }}>上传</Button>
            </div>
            <BannerList></BannerList>
        </div>
    )
}

export default Banner;